<template>
  <div class="app-container">
    <!-- Left sidebar for categories -->
    <div class="sidebar">
      <div class="logo-container">
        <el-avatar :size="50" src="/placeholder.svg?height=50&width=50" />
        <h2>App Center</h2>
      </div>

      <el-menu
        :default-active="activeCategory"
        class="category-menu"
        @select="handleCategorySelect"
      >
        <el-menu-item v-for="category in categories" :key="category.id" :index="category.id">
          <el-icon><component :is="category.icon" /></el-icon>
          <span>{{ category.name }}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- Right content area for apps -->
    <div class="content">
      <div class="header">
        <h1>{{ currentCategory.name }}</h1>
        <el-input
          v-model="searchQuery"
          placeholder="Search apps..."
          prefix-icon="Search"
          class="search-input"
        />
      </div>

      <p class="description">{{ currentCategory.description }}</p>

      <!-- Draggable app grid -->
      <draggable
        v-model="filteredApps"
        item-key="id"
        class="app-grid"
        ghost-class="ghost"
        chosen-class="chosen"
        animation="300"
        @end="saveOrder"
      >
        <template #item="{ element }">
          <div class="app-card">
            <el-image :src="element.icon" class="app-icon" fit="cover" />
            <h3>{{ element.name }}</h3>
            <p>{{ element.description }}</p>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  Monitor,
  Briefcase,
  Headphones,
  Camera,
  Gamepad,
  Settings,
  Search
} from '@element-plus/icons-vue'
import draggable from 'vuedraggable'

// Define types
interface Category {
  id: string
  name: string
  description: string
  icon: string
}

interface App {
  id: string
  name: string
  description: string
  icon: string
  categoryId: string
  order: number
}

// Categories data
const categories = ref<Category[]>([
  {
    id: 'productivity',
    name: 'Productivity',
    description: 'Apps to help you get work done efficiently',
    icon: 'Briefcase'
  },
  {
    id: 'entertainment',
    name: 'Entertainment',
    description: 'Apps for music, videos, and more',
    icon: 'Headphones'
  },
  {
    id: 'creativity',
    name: 'Creativity',
    description: 'Express yourself with these creative tools',
    icon: 'Camera'
  },
  {
    id: 'games',
    name: 'Games',
    description: 'Popular games for your enjoyment',
    icon: 'Gamepad'
  },
  {
    id: 'utilities',
    name: 'Utilities',
    description: 'Essential tools for your system',
    icon: 'Settings'
  }
])

// Apps data
const apps = ref<App[]>([
  {
    id: 'app1',
    name: 'Pages',
    description: 'Word processing made simple',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'productivity',
    order: 1
  },
  {
    id: 'app2',
    name: 'Numbers',
    description: 'Spreadsheets reimagined',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'productivity',
    order: 2
  },
  {
    id: 'app3',
    name: 'Keynote',
    description: 'Beautiful presentations',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'productivity',
    order: 3
  },
  {
    id: 'app4',
    name: 'Music',
    description: 'Stream millions of songs',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'entertainment',
    order: 1
  },
  {
    id: 'app5',
    name: 'TV',
    description: 'Watch shows and movies',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'entertainment',
    order: 2
  },
  {
    id: 'app6',
    name: 'Photos',
    description: 'Organize and edit images',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'creativity',
    order: 1
  },
  {
    id: 'app7',
    name: 'iMovie',
    description: 'Create and share videos',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'creativity',
    order: 2
  },
  {
    id: 'app8',
    name: 'Arcade',
    description: 'Unlimited games, no ads',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'games',
    order: 1
  },
  {
    id: 'app9',
    name: 'Calculator',
    description: 'Perform calculations',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'utilities',
    order: 1
  },
  {
    id: 'app10',
    name: 'Calendar',
    description: 'Manage your schedule',
    icon: '/placeholder.svg?height=60&width=60',
    categoryId: 'utilities',
    order: 2
  }
])

// State
const activeCategory = ref('productivity')
const searchQuery = ref('')

// Computed properties
const currentCategory = computed(() => {
  return (
    categories.value.find((category) => category.id === activeCategory.value) || categories.value[0]
  )
})

const filteredApps = computed({
  get: () => {
    return apps.value
      .filter((app) => app.categoryId === activeCategory.value)
      .filter((app) => app.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
      .sort((a, b) => a.order - b.order)
  },
  set: (newValue) => {
    // Update the order property based on the new array order
    newValue.forEach((app, index) => {
      const originalApp = apps.value.find((a) => a.id === app.id)
      if (originalApp) {
        originalApp.order = index + 1
      }
    })
  }
})

// Methods
const handleCategorySelect = (categoryId: string) => {
  activeCategory.value = categoryId
}

const saveOrder = () => {
  // In a real app, you would save the new order to a database or localStorage
  console.log('New order saved:', filteredApps.value)

  // Example of saving to localStorage
  localStorage.setItem('appOrder', JSON.stringify(apps.value))
}

// Lifecycle hooks
onMounted(() => {
  // Load saved order from localStorage if available
  const savedOrder = localStorage.getItem('appOrder')
  if (savedOrder) {
    apps.value = JSON.parse(savedOrder)
  }
})
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #f5f5f7;
}

.sidebar {
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 0 20px 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
}

.logo-container h2 {
  margin-left: 10px;
  font-weight: 500;
  font-size: 18px;
}

.category-menu {
  border-right: none;
}

.content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 28px;
  font-weight: 500;
  margin: 0;
}

.search-input {
  width: 240px;
}

.description {
  color: #666;
  margin-bottom: 30px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.app-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.app-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.app-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 500;
}

.app-card p {
  margin: 0;
  font-size: 13px;
  color: #666;
}

.ghost {
  opacity: 0.5;
}

.chosen {
  background-color: #f0f0f0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
  }

  .app-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style>
